<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css" />
    <script language="JavaScript" src="layui/layui.all.js"></script>
    <script language="JavaScript"src="js/xm-select.js"></script>
    <script language="JavaScript"src="js/jquery.min.js"></script>
    <script language="JavaScript"src="https://unpkg.com/axios@0.21.4/dist/axios.min.js"></script>

    <style>
         .xm-select-demo, .xm-select-demo-alert {
             vertical-align: top;
             display: inline-block;
             width: 300px;
             margin-bottom: 10px;
         }
        .content{
            margin: 50px 0px 0px 50px;
        }
    </style>
</head>
<body>
<div class="content">
    <a href="https://maplemei.gitee.io/xm-select/#/component/install">文档地址</a>
    <a href="https://gitee.com/maplemei/xm-select?_from=gitee_search">gitee地址</a>
    <br/>
    <span>下拉选择框-带搜素-分页</span>
    <div id="demo1" class="xm-select-demo"></div>
    <br/>
    <span>下拉选择框-带搜素-分页-远程数据</span>
    <div id="demo2" class="xm-select-demo"></div>

    <br/>
    <span>下拉选择框-带搜素-分页-远程数据</span>
    <div id="demo3" class="xm-select-demo"></div>
</div>
<script>
    var demo1 = xmSelect.render({
        el: '#demo1',
        filterable: true,
        radio: true,
        paging: true,
        pageSize: 3,
        data: [
            {name: '水果', value: 1},
            {name: '蔬菜', value: 2},
            {name: '桌子', value: 3},
            {name: '北京', value: 4},
        ]
    });

    var demo2 = xmSelect.render({
        el: '#demo2',
        filterable: true,
        radio: true,
        //配置远程分页
        paging: true,
        pageSize: 3,//不起效果
        pageRemote: true,
        remoteSearch: true,
        //数据处理
        remoteMethod: function(val, cb, show, pageIndex){
            //val: 搜索框的内容, 不开启搜索默认为空, cb: 回调函数, show: 当前下拉框是否展开, pageIndex: 当前第几页

            //这里的axios类似于ajax
            axios({
                method: 'get',
                url: 'https://www.fastmock.site/mock/98228b1f16b7e5112d6c0c87921eabc1/xmSelect/search',
                params: {
                    keyword: val + '_' + pageIndex,
                }
            }).then(response => {
                //这里是success的处理
                var res = response.data;
                //回调需要两个参数, 第一个: 数据数组, 第二个: 总页码
                cb(res.data, 10)
            }).catch(err => {
                //这里是error的处理
                cb([], 0);
            });
        }
    });


    var demo3 = xmSelect.render({
        el: '#demo3',
        filterable: true,
        radio: true,
        paging: true,
        pageSize: 3,
        //配置远程分页
        paging: true,
        pageRemote: true,
        remoteSearch: true,
        //数据处理
        remoteMethod: function(val, cb, show, pageIndex){
            //val: 搜索框的内容, 不开启搜索默认为空, cb: 回调函数, show: 当前下拉框是否展开, pageIndex: 当前第几页
            console.log("进来");
            //这里的axios类似于ajax
            axios({
                method: 'get',
                url: 'https://www.fastmock.site/mock/98228b1f16b7e5112d6c0c87921eabc1/xmSelect/search',
                params: {
                    keyword: val + '_' + pageIndex,
                }
            }).then(response => {
                //这里是success的处理
                var res = response.data;
                //回调需要两个参数, 第一个: 数据数组, 第二个: 总页码
                cb(res.data, 10)
            }).catch(err => {
                //这里是error的处理
                cb([], 0);
            });
        }
    });
</script>
<script>
    var accountId = "";
    var text = "<td>\n" +
        "    <button onclick=\"bindcrm ("+accountId+",'EDIT')\" id=\"bindcrm\" title=\"\" class=\"btn\">\n" +
        "        <div class=\"outDiv\">\n" +
        "            <div class=\"inDiv\">\n" +
        "                <label>换绑</label>\n" +
        "            </div>\n" +
        "        </div>\n" +
        "    </button>\n" +
        "    <button onclick=\"bindcrm("+accountId+",'UNBIND')\" id=\"bindcrm\" title=\"\" class=\"btn\">\n" +
        "        <div class=\"outDiv\">\n" +
        "            <div class=\"inDiv\">\n" +
        "                <label>解绑</label>\n" +
        "            </div>\n" +
        "        </div>\n" +
        "    </button>\n" +
        "</td>";
</script>


</body>
</html>